<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="navbar.jsp" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    
    <title>My JSP 'new_contact.jsp' starting page</title>
    <link rel="stylesheet" type="text/css" href="styles/css/bootstrap.min.css" />

  </head>
  
  <body class="body">
   <div class="container" style="margin-top:60px;width:960px;margin-left:auto;margin-right:auto;">

	  <div class="row">

	
		 <!-- 导入左侧部分 -->
		<jsp:include page="side.jsp">
			<jsp:param value="contact" name="tag"/>
		</jsp:include>

	
		<div class="span9">

			<form class="form-horizontal demoform" action="pms.jspx?m=new_contact" method="post" id="myform" >

        <fieldset>

          <legend>添加新联系人</legend>

          <div class="control-group">

            <label class="control-label" for="input01">姓名</label>

            <div class="controls">

              <input type="text" name="contactname" class="span5" id="contactname" x-webkit-speech="undefined" style="height:30px"/><br />
			  <span id="span1" style="color:red;"></span>

            </div>

          </div>

		   <div class="control-group">

            <label class="control-label" for="input01">公司</label>

            <div class="controls">

              <input type="text" name="company" class="span5" id="company" x-webkit-speech="undefined" style="height:30px"/><br />
			  <span id="span2" style="color:red;"></span>

            </div>

          </div>

		  <div class="line"></div>

		   <div class="control-group">

            <label class="control-label" for="input01">手机</label>

            <div class="controls">

              <input type="text" name="tel" class="span5" id="tel" x-webkit-speech="undefined"style="height:30px"/><br />
			  <span id="span3" style="color:red;"></span>

            </div>

          </div>

		   <div class="control-group">

            <label class="control-label" for="input01">固话</label>

            <div class="controls">

              <input type="text" name="phone" class="span5" id="phone" x-webkit-speech="undefined"style="height:30px"/><br />
			  <span id="span4" style="color:red;"></span>

            </div>

          </div>

		  <div class="control-group">

            <label class="control-label" for="input01">邮箱</label>

            <div class="controls">

              <input type="text" name="email" class="span5" id="email" x-webkit-speech="undefined"style="height:30px"/><br />
			  <span id="span5" style="color:red;"></span>

            </div>

          </div>

		   <div class="line"></div>

		  <div class="control-group">

            <label class="control-label" for="input01">地址</label>

            <div class="controls">

              <input type="text" name="address" class="span5" id="address" x-webkit-speech="undefined" style="height:30px" style="height:30px"/><br />
			  <span id="span6" style="color:red;"></span>

            </div>

          </div>

		   <div class="line"></div>

		   <div class="control-group">

            <label class="control-label" for="input01">主页</label>

            <div class="controls">

              <input type="text" name="mainweb" class="span5" id="mainweb" x-webkit-speech="undefined" value="" style="height:30px"/><br />
			  <span id="span7" style="color:red;"></span>

			  <p class="help-block">http://www.xxx.com</p>

            </div>

          </div>

		   <div class="control-group">

            <label class="control-label" for="input01">微博</label>

            <div class="controls">

				<select class="span2" name="weibo" id="weibo">

					

					<option value="weibo.com/n/">新浪微博</option>

					<option value="http://t.qq.com/">腾讯微博</option>

					<option value="https://twitter.com/">Twitter</option>

				</select>

				<div class="input-prepend">

					<span class="add-on">@</span><input type="text" class="span2" name="blogname" id="prependedInput" size="16" type="text" x-webkit-speech="undefined" style="height:28px"/>

                </div>

				

            </div>

          </div>

		   <div class="control-group">

            <label class="control-label" for="input01">简介</label>

            <div class="controls">

              <textarea class="span5" id="desc" rows="6" name="desc"></textarea><br />
			  <span id="span8" style="color:red;"></span>

            </div>

          </div>

		  

		  



          <div class="form-actions">

            <button type="button" id="btnSubmit" class="btn btn-primary">保存</button>

            <button  class="btn" ><a href="contact.jspx" style="text-decoration:none">返回</a></button>

          </div>

        </fieldset>

      </form>          

          	

		</div>

		<div class="span3">

			

		</div>

	  </div>

	</div>
	
	
	
	<script type="text/javascript" src="styles/jquery/jquery.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#btnSubmit").click(function(){
			
			//验证姓名
				var contactname = $("#contactname").val();			
				if(contactname.trim().length == 0){			//在验证表单时是不能用看是不是=null来判断的，因为提交到表单之后肯定是空，而不是null，名字不可以是空格
					$("#span1").html("姓名不能为空！");
					$("#contactname").focus();
					return ;
				} 
				if(contactname.trim().length > 15){
					$("#span1").html("姓名最多不超过15位！");
					$("#contactname").focus();
					return;
				}
				
			//验证公司
				var company = $("#company").val();			
				if(company.trim().length == 0){			
					$("#span2").html("公司名不能为空！");
					$("#company").focus();
					return ;
				} 
				if(company.trim().length > 15){
					$("#span2").html("公司名最多不超过15位！");
					$("#company").focus();
					return;
				}
				
				
					
			//验证手机
				var tel = $("#tel").val();
				if(tel.trim().length == 0){
					$("#span3").html("手机号不能为空！");
					$("#tel").focus();
					return;
				} else {
					var reg = /^(133|137|138|151|152|158|188|155|)(\d+){8}$/;
					if(!tel.match(reg)){
						$("#span3").html("请填入格式正确的11位手机号码！");
						$("#tel").focus();
						return;
					}
				} 
				
			//验证固话
				var phone = $("#phone").val();
				if(phone.trim().length == 0){
					$("#span4").html("固话不能为空！");
					$("#phone").focus();
					return;
				} else {
					var reg = /^(\d+){4}-((\d+){7}|(\d+){8})$/;
					if(!phone.match(reg)){
						$("#span4").html("请填入格式正确的固话号码！如：0596—5318974");
						$("#phone").focus();
						return;
					}
				} 
				
				
				
				//验证邮箱
				var email = $("#email").val();			
				if(email.trim().length == 0){			
					$("#span5").html("邮箱不能为空！");
					$("#email").focus();
					return ;
				} else {
					var reg = /^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/;
					if(!email.match(reg)){
						$("#span5").html("请填入格式正确的邮箱格式!");
						$("#email").focus();
						return;
					}
				}
				
				//验证地址
				var address = $("#address").val();			
				if(address.trim().length == 0){			
					$("#span6").html("地址不能为空！");
					$("#address").focus();
					return ;
				} 
				if(address.trim().length > 30){
					$("#span6").html("地址最多不超过30位！");
					$("#address").focus();
					return;
				}
				
				//验证主页
				var mainweb = $("#mainweb").val();			
				if(mainweb.trim().length == 0){			
					$("#span7").html("主页不能为空！");
					$("#mainweb").focus();
					return ;
				} else {
				var reg = /^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/;
					if(!mainweb.match(reg)){
						$("#span7").html("请填入格式正确的网址!");
						$("#mainweb").focus();
						return;
					}
				}
				
				//验证简介
				var desc = $("#desc").val();			
				if(desc.trim().length == 0){			
					$("#span8").html("简介不能为空！");
					$("#desc").focus();
					return ;
				} 
				if(desc.trim().length > 300){
					$("#span8").html("简介最多不超过300位！");
					$("desc").focus();
					return;
				}
				
				
				
						
				
				$("#myform").submit();
			});
		});
	</script>
	
   
  </body>
</html>
